<template>
  <div class="help-center">
    <!-- 帮助中心头部 -->
    <div class="help-header">
      <h1>帮助中心</h1>
      <p>为您提供全面的用户支持和服务</p>
    </div>
    
    <!-- 导航选项卡 -->
    <div class="help-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="help-content">
      <!-- 信息反馈 -->
      <div v-if="activeTab === 'feedback'" class="tab-panel">
        <h2>信息反馈</h2>
        <div class="feedback-form">
          <div class="form-group">
            <label for="feedback-type">反馈类型</label>
            <select id="feedback-type" v-model="feedbackForm.type">
              <option value="bug">功能异常</option>
              <option value="suggestion">功能建议</option>
              <option value="content">内容问题</option>
              <option value="other">其他问题</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="feedback-title">标题</label>
            <input id="feedback-title" v-model="feedbackForm.title" type="text" placeholder="请输入反馈标题">
          </div>
          
          <div class="form-group">
            <label for="feedback-content">详细描述</label>
            <textarea 
              id="feedback-content" 
              v-model="feedbackForm.content" 
              rows="5" 
              placeholder="请详细描述您遇到的问题或建议"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label for="feedback-contact">联系方式（选填）</label>
            <input id="feedback-contact" v-model="feedbackForm.contact" type="text" placeholder="请留下您的邮箱或手机号">
          </div>
          
          <div class="form-actions">
            <button class="btn-primary" @click="submitFeedback">提交反馈</button>
          </div>
        </div>
      </div>
      
      <!-- 侵权投诉 -->
      <div v-if="activeTab === 'copyright'" class="tab-panel">
        <h2>侵权投诉</h2>
        <div class="copyright-info">
          <p>如果您发现本站存在侵犯您权益的内容，请提交侵权投诉申请，我们将尽快处理。</p>
          
          <div class="complaint-form">
            <div class="form-group">
              <label for="right-holder">权利人姓名/名称</label>
              <input id="right-holder" v-model="copyrightForm.rightHolder" type="text" placeholder="请输入权利人姓名或名称">
            </div>
            
            <div class="form-group">
              <label for="infringed-url">侵权内容链接</label>
              <input id="infringed-url" v-model="copyrightForm.infringedUrl" type="text" placeholder="请输入侵权内容的URL地址">
            </div>
            
            <div class="form-group">
              <label for="infringed-content">侵权内容描述</label>
              <textarea 
                id="infringed-content" 
                v-model="copyrightForm.infringedContent" 
                rows="4" 
                placeholder="请描述侵权内容及其侵权方式"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label for="copyright-proof">权利证明</label>
              <input id="copyright-proof" type="file" @change="handleFileUpload">
              <p class="file-hint">请上传您拥有相关权利的证明文件（支持图片、PDF格式）</p>
            </div>
            
            <div class="form-group">
              <label for="copyright-contact">联系方式</label>
              <input id="copyright-contact" v-model="copyrightForm.contact" type="text" placeholder="邮箱或手机号">
            </div>
            
            <div class="form-group checkbox">
              <input id="legal-declaration" v-model="copyrightForm.legalDeclaration" type="checkbox">
              <label for="legal-declaration">
                我保证所提供的信息真实有效，并愿意承担因虚假信息导致的法律责任
              </label>
            </div>
            
            <div class="form-actions">
              <button class="btn-primary" @click="submitComplaint">提交投诉</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作设置帮助 -->
      <div v-if="activeTab === 'settings'" class="tab-panel">
        <h2>操作设置帮助</h2>
        <div class="help-articles">
          <div class="article">
            <h3>账户设置</h3>
            <div class="article-content">
              <p>如何修改个人信息？</p>
              <ol>
                <li>登录您的账户</li>
                <li>点击右上角头像进入个人中心</li>
                <li>选择"编辑资料"即可修改个人信息</li>
              </ol>
              
              <p>如何修改密码？</p>
              <ol>
                <li>在个人中心选择"账户安全"</li>
                <li>点击"修改密码"</li>
                <li>输入原密码和新密码后保存</li>
              </ol>
            </div>
          </div>
          
          <div class="article">
            <h3>隐私设置</h3>
            <div class="article-content">
              <p>如何设置谁可以评论我的内容？</p>
              <ol>
                <li>进入个人中心的"隐私设置"</li>
                <li>找到"评论权限"选项</li>
                <li>选择"所有人"、"关注的人"或"仅自己"</li>
              </ol>
            </div>
          </div>
          
          <div class="article">
            <h3>播放设置</h3>
            <div class="article-content">
              <p>如何调整默认播放质量？</p>
              <ol>
                <li>在视频播放器界面点击设置图标</li>
                <li>选择"播放设置"</li>
                <li>设置您偏好的默认播放质量</li>
              </ol>
              
              <p>如何开启自动播放？</p>
              <ol>
                <li>进入全局设置</li>
                <li>找到"播放设置"</li>
                <li>开启"自动播放"选项</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 联系客服 -->
      <div v-if="activeTab === 'contact'" class="tab-panel">
        <h2>联系客服</h2>
        <div class="contact-methods">
          <div class="method">
            <h3>在线客服</h3>
            <p>工作日 9:00-22:00，周末 10:00-20:00</p>
            <button class="btn-primary start-chat">立即咨询</button>
          </div>
          
          <div class="method">
            <h3>客服热线</h3>
            <p>400-123-4567</p>
            <p>工作时间：每日 9:00-24:00</p>
          </div>
          
          <div class="method">
            <h3>邮件联系</h3>
            <p>support@shijiewujie.com</p>
            <p>我们会在24小时内回复您的邮件</p>
          </div>
          
          <div class="method">
            <h3>社交媒体</h3>
            <div class="social-links">
              <a href="#" class="social-link weibo">微博</a>
              <a href="#" class="social-link wechat">微信</a>
              <a href="#" class="social-link qq">QQ</a>
            </div>
          </div>
        </div>
        
        <div class="faq-section">
          <h3>常见问题</h3>
          <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
            <div class="faq-question" @click="toggleFaq(index)">
              <span>{{ faq.question }}</span>
              <span class="toggle-icon">{{ faq.expanded ? '−' : '+' }}</span>
            </div>
            <div v-if="faq.expanded" class="faq-answer">
              {{ faq.answer }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelpView',
  data() {
    return {
      activeTab: 'feedback',
      tabs: [
        { id: 'feedback', name: '信息反馈' },
        { id: 'copyright', name: '侵权投诉' },
        { id: 'settings', name: '操作设置帮助' },
        { id: 'contact', name: '联系客服' },
      ],
      feedbackForm: {
        type: 'bug',
        title: '',
        content: '',
        contact: '',
      },
      copyrightForm: {
        rightHolder: '',
        infringedUrl: '',
        infringedContent: '',
        contact: '',
        legalDeclaration: false,
      },
      faqs: [
        {
          question: '如何找回我的密码？',
          answer: '在登录页面点击"忘记密码"，按照提示验证身份后即可重置密码。您可以通过绑定的手机号或邮箱进行验证。',
          expanded: false,
        },
        {
          question: '为什么我的视频无法播放？',
          answer: '视频无法播放可能有以下原因：1. 网络连接问题，请检查您的网络；2. 浏览器缓存问题，建议清除缓存后重试；3. 视频格式不支持，请尝试更换浏览器；4. 视频可能已被删除或下架。',
          expanded: false,
        },
        {
          question: '如何上传自己的视频？',
          answer: '登录后点击页面顶部的"上传"按钮，按照指引选择视频文件、填写视频信息并提交审核。请注意遵守本站的内容规范。',
          expanded: false,
        },
        {
          question: '如何成为会员？',
          answer: '点击顶部导航栏的"会员"入口，选择适合您的会员套餐并完成支付即可成为会员。会员享有高清播放、免广告等特权。',
          expanded: false,
        },
      ],
    }
  },
  created() {
    // 从URL参数中获取tab参数，设置初始活动选项卡
    const tabParam = this.$route.query.tab
    if (tabParam && ['feedback', 'copyright', 'settings', 'contact'].includes(tabParam)) {
      this.activeTab = tabParam
    }
  },
  
  methods: {
    submitFeedback() {
      if (!this.feedbackForm.title || !this.feedbackForm.content) {
        alert('请填写标题和详细描述')
        return
      }
      
      // 模拟提交
      console.log('提交反馈:', this.feedbackForm)
      alert('反馈提交成功，我们将尽快处理您的问题')
      this.resetFeedbackForm()
    },
    
    resetFeedbackForm() {
      this.feedbackForm = {
        type: 'bug',
        title: '',
        content: '',
        contact: '',
      }
    },
    
    submitComplaint() {
      if (!this.copyrightForm.rightHolder || !this.copyrightForm.infringedUrl || !this.copyrightForm.infringedContent) {
        alert('请填写权利人信息、侵权链接和侵权描述')
        return
      }
      
      if (!this.copyrightForm.legalDeclaration) {
        alert('请确认法律声明')
        return
      }
      
      // 模拟提交
      console.log('提交侵权投诉:', this.copyrightForm)
      alert('侵权投诉已提交，我们将在3-5个工作日内处理并回复')
      this.resetCopyrightForm()
    },
    
    resetCopyrightForm() {
      this.copyrightForm = {
        rightHolder: '',
        infringedUrl: '',
        infringedContent: '',
        contact: '',
        legalDeclaration: false,
      }
    },
    
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        console.log('上传文件:', file.name)
        // 这里可以添加文件验证逻辑
      }
    },
    
    toggleFaq(index) {
      this.faqs[index].expanded = !this.faqs[index].expanded
    },
  },
}
</script>

<style scoped>
.help-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.help-header {
  text-align: center;
  margin-bottom: 40px;
}

.help-header h1 {
  font-size: 36px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 10px;
}

.help-header p {
  font-size: 18px;
  color: var(--text-secondary, #666);
}

.help-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-light, #eaeaea);
  margin-bottom: 30px;
  overflow-x: auto;
  white-space: nowrap;
}

.tab {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.tab:hover {
  color: var(--primary-color, #00a1d6);
}

.tab.active {
  color: var(--primary-color, #00a1d6);
  border-bottom-color: var(--primary-color, #00a1d6);
}

.help-content {
  background-color: var(--background-light, #ffffff);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tab-panel h2 {
  font-size: 24px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light, #eaeaea);
}

/* 表单样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid var(--border-light, #eaeaea);
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color, #00a1d6);
}

.form-group.checkbox {
  display: flex;
  align-items: flex-start;
}

.form-group.checkbox input {
  width: auto;
  margin-top: 3px;
  margin-right: 10px;
}

.form-group.checkbox label {
  margin-bottom: 0;
  font-weight: normal;
  flex: 1;
}

.file-hint {
  font-size: 12px;
  color: var(--text-secondary, #666);
  margin-top: 5px;
}

.form-actions {
  margin-top: 30px;
  text-align: right;
}

.btn-primary {
  background-color: var(--primary-color, #00a1d6);
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #0091c6;
}

/* 操作设置帮助样式 */
.help-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.article {
  background-color: var(--background-alt, #f8f9fa);
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.article h3 {
  font-size: 18px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 15px;
}

.article-content p {
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 10px;
}

.article-content ol {
  margin-bottom: 15px;
  padding-left: 20px;
}

.article-content li {
  margin-bottom: 8px;
  color: var(--text-secondary, #666);
}

/* 联系客服样式 */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.method {
  background-color: var(--background-alt, #f8f9fa);
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  transition: transform 0.3s ease;
}

.method:hover {
  transform: translateY(-5px);
}

.method h3 {
  font-size: 18px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 15px;
}

.method p {
  color: var(--text-secondary, #666);
  margin-bottom: 10px;
}

.start-chat {
  margin-top: 10px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.social-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.social-link:hover {
  transform: scale(1.1);
}

.social-link.weibo {
  background-color: #e6162d;
}

.social-link.wechat {
  background-color: #07c160;
}

.social-link.qq {
  background-color: #12b7f5;
}

/* FAQ样式 */
.faq-section h3 {
  font-size: 20px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 20px;
}

.faq-item {
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-light, #eaeaea);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--primary-color, #00a1d6);
}

.toggle-icon {
  font-size: 20px;
  color: var(--primary-color, #00a1d6);
}

.faq-answer {
  padding: 0 0 15px 0;
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .help-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  
  .tab {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .help-content {
    padding: 20px;
  }
  
  .contact-methods,
  .help-articles {
    grid-template-columns: 1fr;
  }
}
</style>